<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的名片</title>

</head>


<body>

    <link rel="stylesheet" href="../../element/element.css">
    <script src="../../element/vue.js"></script>
    <script src="../../element/index.js"></script>
    <script src="../../js/axios.min.js"></script>
    <div id="app">
        <div>
            <h2>姓名：{{username}}</h2>
            <h3>虚拟货币金额：{{ balance }} 元</h3>
            <el-button type="primary" @click="showRechargeDialog">充值</el-button>
            <el-button type="danger" @click="showWithdrawDialog">提现</el-button>
        </div>

        <!-- 充值对话框 -->
        <el-dialog title="充值" :visible.sync="rechargeDialogVisible">
            <el-form :model="rechargeForm" label-width="80px">
                <el-form-item label="充值金额">
                    <el-input v-model="rechargeForm.amount"></el-input>
                </el-form-item>

            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="rechargeDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="showRechargeDialog2">下一步</el-button>
            </div>
        </el-dialog>
        <!-- 充值对话框2 -->
        <el-dialog title="充值" :visible.sync="rechargeDialogVisible2">
            
            <h3 style="color: red;">支付倒计时：{{ countdown }}</h3>
            <div>
                <img src="../../img/766.png" alt="图片" style="width: 200px; height: 200px;">
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="rechargeDialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="handleRecharge">确定</el-button>
            </div>
        </el-dialog>
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="捐款记录" name="donation">
                <el-table :data="donationRecords" style="width: 100%">
                    <el-table-column prop="donationId" label="捐款单号"></el-table-column>
                    <el-table-column prop="donationRecordsId" label="募捐号"></el-table-column>
                    <el-table-column prop="userId" label="募捐人"></el-table-column>
                    <el-table-column prop="donationTime" label="捐款时间">
                        <template slot-scope="scope">
                            {{ formatDate(scope.row.donationTime) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="donationAmount" label="捐款金额"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleOperation(scope.row)">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <!-- 充值记录，提现记录和退回记录 -->
            <el-tab-pane label="充值记录" name="Recharge">
                <el-table :data="doRechargeRecords" style="width: 100%">
                    <el-table-column prop="transferId" label="充值记录单号"></el-table-column>
                    <el-table-column prop="time" label="捐款时间">
                        <template slot-scope="scope">
                            {{ formatDate(scope.row.time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="充值记录金额"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="提现记录" name="Withdrawal">
                <el-table :data="WithdrawalRecords" style="width: 100%">
                    <el-table-column prop="transferId" label="提现单号"></el-table-column>
                    <el-table-column prop="time" label="捐款时间">
                        <template slot-scope="scope">
                            {{ formatDate(scope.row.time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="提现金额"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="退回记录" name="Return">
                <el-table :data="ReturnRecords" style="width: 100%">
                    <el-table-column prop="transferId" label="退回单号"></el-table-column>
                    <el-table-column prop="time" label="捐款时间">
                        <template slot-scope="scope">
                            {{ formatDate(scope.row.time) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="退回金额"></el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    username: localStorage.getItem('userName'),
                    balance: 0,
                    userId: localStorage.getItem('userId'),
                    rechargeDialogVisible: false,
                    rechargeDialogVisible2: false,
                    rechargeForm: {
                        amount: '',
                        payPassword: ''
                    },
                    activeTab: 'donation',
                    activeTab: 'doRecharge',
                    activeTab: 'Withdrawal',
                    activeTab: 'Return',
                    donationRecords: [],
                    doRechargeRecords: [],
                    WithdrawalRecords: [],
                    ReturnRecords: [],
                    countdown: 180, // 倒计时时间，单位为秒
                    timer: null // 计时器对象
                };
            },
            created() {
                this.fetchBalance(this.userId);
            },
            methods: {
                showRechargeDialog2(){
                    this.rechargeDialogVisible2= true;
                    this.startCountdown();
                    
                },
                //计时器
                startCountdown() {
                this.timer = setInterval(() => {
                    if (this.countdown > 0) {
                        this.countdown -= 0.03; // 每次减少 0.01 秒
                        this.countdown = this.countdown.toFixed(2); // 保留两位小数
                    } else {
                        this.closeDialog();
                    }
                }, 30); // 每 0.03 秒执行一次
            },
                closeDialog() {
                    this.rechargeDialogVisible2 = false
                    clearInterval(this.timer)
                    this.countdown = 180
                },

                formatDate(dateString) {
                    const date = new Date(dateString);
                    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
                },
                fetchBalance(userId) {
                    console.log(userId);
                    axios.get('http://localhost:8888/api/money/moneyInfo?userId=' + userId)
                        .then(response => {
                            console.log(response);
                            if (response.data.code === 0) {
                                this.balance = response.data.data;
                            } else {
                                // 处理错误情况
                            }
                        })
                        .catch(error => {
                            // 处理错误情况
                        });
                },
                showRechargeDialog() {
                    this.rechargeDialogVisible = true;
                },
                handleRecharge() {
                    const { amount, payPassword } = this.rechargeForm;
                    axios.post('http://localhost:8888/api/money/recharge', { userId: this.userId, amount, payPassword })
                        .then(response => {
                            if (response.data.code === 0) {
                                this.rechargeDialogVisible = false;
                                this.fetchBalance(); // 充值成功后刷新余额信息
                                // 其他处理充值成功的逻辑
                            } else {
                                // 处理充值失败情况
                            }
                        })
                        .catch(error => {
                            // 处理错误情况
                        });
                },
                showWithdrawDialog() {
                    this.$prompt('请输入提现金额', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^\d+(\.\d{1,2})?$/, // 输入格式为非负数，最多包含两位小数
                        inputErrorMessage: '请输入正确的提现金额'
                    }).then(({ value }) => {
                        this.$prompt('请输入支付密码', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputType: 'password'
                        }).then(({ value: payPassword }) => {
                            this.handleWithdraw(parseFloat(value), payPassword);
                        });
                    }).catch(() => {
                        // 用户取消操作
                    });
                },
                handleWithdraw(amount, payPassword) {
                    axios.post('http://localhost:8888/api/money/withdraw', { userId: this.userId, amount, payPassword })
                        .then(response => {
                            if (response.data.code === 0) {
                                this.fetchBalance(); // 提现成功后刷新余额信息
                                this.$message({
                                    type: 'success',
                                    message: '提现成功'
                                });
                            } else {
                                this.$message.error('提现失败：' + response.data.message);
                            }
                        })
                        .catch(error => {
                            this.$message.error('提现失败：网络错误');
                        });
                },
                handleOperation(row) {
                    // 在这里编写跳转逻辑
                    localStorage.setItem("donationId", row.donationId);
                    //
                    window.location.href = "./userDonation.html";
                },
                handleTabClick(tab) {
                    console.log('Tab clicked:', tab.name);
                },
                fetchDonationRecords(userId) {
                    //捐款
                    // 替换 YOUR_API_ENDPOINT 和 userId 为实际的接口地址和用户ID
                    axios.get('http://localhost:8888/api/money/donationRecordsByUserId', {
                        params: {
                            userId: userId
                        }
                    })
                        .then(response => {
                            this.donationRecords = response.data.data;
                            console.log(this.donationRecords);
                        })
                        .catch(error => {
                            console.error('Error fetching donation records', error);
                        });
                },
                fetchdoRechargeRecords(userId) {
                    //充值
                    
                    axios.get('http://localhost:8888/api/money/rechargeByUserId', {
                        params: {
                            userId: userId
                        }
                    })
                        .then(response => {
                            this.doRechargeRecords = response.data.data;
                            console.log(this.doRechargeRecords);
                        })
                        .catch(error => {
                            console.error('Error fetching donation records', error);
                        });
                },
                fetchWithdrawalRecords(userId) {
                    //提现
                    axios.get('http://localhost:8888/api/money/withdrawByUserId', {
                        params: {
                            userId: userId
                        }
                    })
                        .then(response => {
                            this.WithdrawalRecords = response.data.data;
                        })
                        .catch(error => {
                            console.error('Error fetching donation records', error);
                        });
                },
                fetchReturnRecords(userId) {
                    //退回

                    axios.get('http://localhost:8888/api/money/refundByUserId', {
                        params: {
                            userId: userId
                        }
                    })
                        .then(response => {
                            this.ReturnRecords = response.data.data;
                        })
                        .catch(error => {
                            console.error('Error fetching donation records', error);
                        });
                },

            },
            mounted() {
                // 在页面加载后获取捐款记录数据，假设用户ID为 123
                this.fetchDonationRecords(this.userId);
                this.fetchdoRechargeRecords(this.userId);
                this.fetchWithdrawalRecords(this.userId);
                this.fetchReturnRecords(this.userId);
            }
        });
    </script>
</body>

</html>